<template>
  <div class="profile-container">
    <div class="profile-content">
      <!-- 左侧用户信息 -->
      <div class="user-info-section">
        <div class="user-card">
          <div class="avatar">
            <img :src="userInfo?.avatar || defaultAvatarUrl" alt="用户头像">
          </div>
          <div class="user-details">
            <h3>{{ userInfo?.username || '未设置昵称' }}</h3>
            <div class="user-level">
              <span class="level-label">会员等级：</span>
              <span class="level-value">
                <i class="iconfont icon-vip"></i>
                {{ userInfo?.memberLevel || '普通会员' }}
              </span>
            </div>
          </div>
        </div>

        <!-- 新增：会员充值卡片 -->
        <div class="vip-card">
          <h3>开通会员</h3>
          <div class="vip-options">
            <div
              v-for="(option, index) in vipOptions"
              :key="index"
              class="vip-option"
              :class="{
                'selected': selectedVip === index,
                'lower-level': isLowerLevel(option)
              }"
              @click="selectedVip = index"
            >
              <div class="vip-badge">VIP</div>
              <div class="vip-content">
                <div class="vip-level">{{ option.duration }}</div>
                <div class="vip-divider"></div>
                <div class="vip-price">
                  <span class="currency">¥</span>
                  <span class="amount">{{ option.price }}</span>
                </div>
              </div>
            </div>
          </div>
          <button class="recharge-btn" @click="handleRecharge">立即开通</button>
        </div>
      </div>

      <!-- 右侧内容区 -->
      <div class="main-content">
        <!-- 订单部分 - 放在个人信息之前 -->
        <div class="section-card order-section">
          <div class="section-header">
            <h2>我的订单</h2>
            <router-link to="/orders" class="view-all">
              查看全部 <i class="iconfont icon-arrow-right"></i>
            </router-link>
          </div>

          <div class="order-list" v-if="orders && orders.length">
            <div class="order-item" v-for="order in orders" :key="order.id">
              <div class="movie-poster">
                <img :src="order.moviePoster" :alt="order.movieName">
              </div>
              <div class="order-info">
                <h4>{{ order.movieName }}</h4>
                <p class="cinema">{{ order.cinemaName }}</p>
                <p class="showtime">{{ order.showtime }}</p>
                <p class="seats">座位：{{ order.seats.join(', ') }}</p>
                <div class="price">￥{{ order.totalPrice }}</div>
              </div>
              <div class="order-status">
                <span :class="order.status">{{ order.statusText }}</span>
              </div>
            </div>
          </div>

          <div class="empty-state" v-else>
            <i class="iconfont icon-ticket-empty"></i>
            <p>暂无订单记录</p>
          </div>
        </div>

        <!-- 个人信息设置 -->
        <div class="section-card">
          <div class="section-header">
            <h2>个人信息</h2>
            <div class="action-buttons">
              <button @click="startEdit" v-if="!isEditing && userInfo?.email" class="edit-btn">
                编辑信息
              </button>
              <button @click="startCompleteInfo" v-if="!isEditing && !userInfo?.email" class="complete-btn">
                完善信息
              </button>
            </div>
          </div>
          <form @submit.prevent="handleSubmit" class="info-form">
            <div class="form-group">
              <label>用户名</label>
              <input
                type="text"
                v-model="form.username"
                :disabled="!isEditing || isCompletingInfo"
                :placeholder="userInfo?.username || '请输入用户名'"
              >
            </div>
            <div class="form-group">
              <label>手机号</label>
              <input
                type="tel"
                v-model="form.phone"
                :disabled="!isEditing || isCompletingInfo"
                :placeholder="userInfo?.phone || '请输入手机号'"
              >
            </div>
            <div class="form-group">
              <label>邮箱 <span class="required">*</span></label>
              <div class="input-wrapper">
                <input
                  type="email"
                  v-model="form.email"
                  :disabled="!isEditing && !isCompletingInfo"
                  :placeholder="userInfo?.email || '请输入邮箱（选填）'"
                  class="email-input"
                >
                <span class="email-tip" v-if="!userInfo?.email && !isEditing && !isCompletingInfo">待完善</span>
              </div>
            </div>
            <div class="button-group" v-if="isEditing || isCompletingInfo">
              <button type="button" @click="handleUpdate" class="save-btn">保存</button>
              <button type="button" @click="cancelEdit" class="cancel-btn">取消</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, nextTick, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import qs from 'qs'

const router = useRouter()
const BASE_URL = 'http://localhost:8080'

// 初始化响应式数据
const userInfo = ref(null)
const form = ref({
  username: '',
  phone: '',
  email: '',
  memberLevel: '',
  // ... 其他字段
})

// 会员套餐选项
const vipOptions = [
  { duration: '青铜会员', price: 15, originalPrice: 20 },
  { duration: '白银会员', price: 40, originalPrice: 60 },
  { duration: '黄金会员', price: 148, originalPrice: 240 },
  { duration: '钻石会员', price: 298, originalPrice: 480 },
  { duration: '王者会员', price: 598, originalPrice: 998 }
]

// 会员等级权重映射
const memberLevelWeight = {
  '普通会员': 0,
  '青铜会员': 1,
  '白银会员': 2,
  '黄金会员': 3,
  '钻石会员': 4,
  '王者会员': 5
}

const isEditing = ref(false)
const isCompletingInfo = ref(false)
const orders = ref([])
const selectedVip = ref(null)

// 在 setup 中设置默认头像路径
const defaultAvatarUrl = 'https://api.dicebear.com/7.x/avataaars/svg?seed=default'

// 修改获取用户信息的方法
const fetchUserInfo = async () => {
  try {
    const userData = localStorage.getItem('user')
    if (!userData) {
      return
    }

    const user = JSON.parse(userData)
    
    // 先设置基本用户信息
    userInfo.value = user
    form.value = {
      username: user.username,
      phone: user.phone,
      email: user.email,
      memberLevel: user.memberLevel
    }
    
    // 获取会员信息
    const memberResponse = await axios.get(`${BASE_URL}/v1/member/select`, {
      params: {
        pageNum: 1,
        pageSize: 10,
        userId: user.id  // 直接使用 userId
      },
      paramsSerializer: params => {
        return qs.stringify(params)
      }
    })

    console.log('会员查询响应:', memberResponse.data)

    if (memberResponse.data.code === 2000 && memberResponse.data.data.list?.length > 0) {
      // 找到当前用户的会员信息
      const memberInfo = memberResponse.data.data.list.find(item => item.userId === user.id)
      console.log('找到的会员信息:', memberInfo)

      if (memberInfo) {
        // 更新员信息
        const updatedUserInfo = {
          ...user,  // 保留原有用户信息
          memberLevel: memberInfo.memberLevel + '会员',
          registrationDate: memberInfo.registrationDate,
          expirationDate: memberInfo.expirationDate,
          status: memberInfo.status,
          discount: memberInfo.discount
        }
        
        console.log('更新后的用户信息:', updatedUserInfo)

        // 更新响应式数据
        userInfo.value = updatedUserInfo

        // 更新表单
        form.value = {
          username: updatedUserInfo.username,
          phone: updatedUserInfo.phone,
          email: updatedUserInfo.email,
          memberLevel: updatedUserInfo.memberLevel
        }

        // 更新本地存储
        localStorage.setItem('user', JSON.stringify(updatedUserInfo))
      } else {
        console.log('未找到匹配的会员信息')
      }
    } else {
      console.log('未获取到会员数据或数据格式不正确')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 组件挂载时初始化数据
onMounted(async () => {
  const userData = localStorage.getItem('user')
  if (userData) {
    const user = JSON.parse(userData)
    // 先显示基本信息
    userInfo.value = user
    form.value = {
      username: user.username,
      phone: user.phone,
      email: user.email,
      memberLevel: user.memberLevel
    }
    // 然后获取最新会员信息
    await fetchUserInfo()
  }
})

// 开始编辑
const startEdit = () => {
  isEditing.value = true
  isCompletingInfo.value = false
  form.value = {
    username: userInfo.value?.username || '',
    phone: userInfo.value?.phone || '',
    email: userInfo.value?.email || ''
  }
}

// 开始完善信息
const startCompleteInfo = () => {
  isCompletingInfo.value = true
  isEditing.value = false
  form.value = {
    ...form.value,
    email: ''
  }
}

// 取消编辑或完善
const cancelEdit = () => {
  isEditing.value = false
  isCompletingInfo.value = false
  form.value = {
    username: userInfo.value?.username || '',
    phone: userInfo.value?.phone || '',
    email: userInfo.value?.email || ''
  }
}

const handleUpdate = async () => {
  try {
    if (isEditing.value) {
      // 编辑模式下的验证
      if (!form.value.username.trim()) {
        alert('用户名不能为空')
        return
      }
      if (!form.value.phone.trim()) {
        alert('手机号不能为空')
        return
      }
    } else if (isCompletingInfo.value) {
      // 完善信息模式下只验证邮箱
      if (!form.value.email.trim()) {
        alert('邮箱不能为空')
        return
      }
    }

    const userData = localStorage.getItem('user')
    if (!userData) {
      alert('用户信不存在，请重新登录')
      router.push('/login')
      return
    }

    const user = JSON.parse(userData)

    // 准备要发送的数据
    const updateData = {
      id: user.id,
      ...(isEditing.value ? {
        username: form.value.username,
        phone: form.value.phone,
        email: form.value.email
      } : {
        email: form.value.email
      })
    }

    const response = await axios.post(`${BASE_URL}/v1/user/updateInfo`, qs.stringify(updateData), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })

    if (response.data.code === 2000) {
      const updatedUser = { ...user, ...updateData }
      localStorage.setItem('user', JSON.stringify(updatedUser))
      userInfo.value = updatedUser
      isEditing.value = false
      isCompletingInfo.value = false
      alert('保存成功！')
    } else {
      alert('保存失败：' + response.data.msg)
    }
  } catch (error) {
    console.error('更新用户信息错误:', error)
    alert('保存失败，请稍后重试')
  }
}

// 修改获取订单数据的方法
const fetchOrders = async () => {
  try {
    const userData = localStorage.getItem('user')
    if (!userData) return

    const user = JSON.parse(userData)
    console.log('获取订单数据，用户ID:', user.id)

    // 从 localStorage 获取订单列表
    const localOrders = JSON.parse(localStorage.getItem('orderList') || '[]')
    
    // 如果有本地订单数据，将其添加到订单列表中
    if (localOrders.length > 0) {
      // 转换订单数据格式以匹配现有的订单显示结构
      const formattedOrders = localOrders.map(order => ({
        id: order.orderNo,
        movieName: '电影票',  // 这里可以根据需要设置电影名称
        cinemaName: '订单号: ' + order.orderNo,
        showtime: order.paymentTime,
        seats: [`支付方式: ${order.paymentMethod === 'wechat' ? '微信支付' : '支付宝'}`],
        totalPrice: order.amount,
        status: 'completed',
        statusText: '已完成'
      }))
      
      orders.value = [...formattedOrders, ...orders.value]
    }

    // 获取后端订单数据
    const response = await axios.get(`${BASE_URL}/v1/orders/user/${user.id}`)
    console.log('订单数据响应:', response.data)

    if (response.data.code === 2000) {
      // 合并后端订单数据
      orders.value = [...orders.value, ...response.data.data]
      console.log('设置订单数据:', orders.value)
    }
  } catch (error) {
    console.error('获取订单失败:', error)
  }
}

// 修改充值处理方法
const handleRecharge = async () => {
  if (selectedVip.value === null) {
    alert('请选择会员套餐')
    return
  }

  try {
    const userData = localStorage.getItem('user')
    if (!userData) {
      alert('请先登录')
      router.push('/login')
      return
    }

    const user = JSON.parse(userData)
    const selectedOption = vipOptions[selectedVip.value]

    // 会员等级权重
    const memberLevelWeight = {
      '普通': 0,
      '青铜': 1,
      '白银': 2,
      '黄金': 3,
      '钻石': 4,
      '王者': 5
    }

    // 获取当前会员等级（去掉"会员"后缀）
    const currentLevel = userInfo.value?.memberLevel?.replace('会员', '') || '普通'
    const currentLevelWeight = memberLevelWeight[currentLevel]
    const selectedLevelWeight = memberLevelWeight[selectedOption.duration.replace('会员', '')]
    
    // 验证会员等级
    if (selectedLevelWeight <= currentLevelWeight) {
      alert('只能购买当前等级更高的会员')
      return
    }

    const memberData = {
      userId: user.id,
      memberLevel: selectedOption.duration.replace('会员', '')
    }

    const response = await axios.post(`${BASE_URL}/v1/member/save`, qs.stringify(memberData), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })

    if (response.data) {
      alert('会员开通成功！请重新登录以更新会员信息')
      localStorage.removeItem('user')
      router.push('/login')
    } else {
      alert('开通失败，请稍后重试')
    }
  } catch (error) {
    console.error('开通会员失败:', error)
    alert('开通失败，请稍后重试')
  }
}

// 添加监听器确保数据同步
watch(userInfo, (newValue) => {
  if (newValue) {
    form.value = {
      username: newValue.username,
      phone: newValue.phone,
      email: newValue.email,
      memberLevel: newValue.memberLevel
    }
  }
}, { deep: true, immediate: true })

// 添加判断是否为低等级的方法
const isLowerLevel = (option) => {
  const memberLevelWeight = {
    '普通': 0,
    '青铜': 1,
    '白银': 2,
    '黄金': 3,
    '钻石': 4,
    '王者': 5
  }
  const currentLevel = userInfo.value?.memberLevel?.replace('会员', '') || '普通'
  const currentLevelWeight = memberLevelWeight[currentLevel]
  const optionLevelWeight = memberLevelWeight[option.duration.replace('会员', '')]
  return optionLevelWeight <= currentLevelWeight
}
</script>

<style scoped>
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.profile-content {
  display: flex;
  gap: 30px;
}

.user-info-section {
  width: 280px;
  flex-shrink: 0;
  margin-right: 20px;
}

.user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px;
}

.avatar {
  width: 100px;
  height: 100px;
  margin-bottom: 15px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ff5f16;
}

.user-details {
  text-align: center;
  width: 100%;
}

.user-details h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #333;
  text-align: center;
}

.user-level {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  color: #666;
}

.level-label {
  font-size: 14px;
}

.level-value {
  display: flex;
  align-items: center;
  gap: 4px;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.stat-item {
  text-align: center;
}

.stat-item .num {
  display: block;
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.stat-item .label {
  font-size: 12px;
  color: #666;
}

.main-content {
  flex: 1;
  min-width: 0;
}

.section-card {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.section-header h2 {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.view-all {
  color: #666;
  text-decoration: none;
  font-size: 14px;
}

.order-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.order-item {
  display: flex;
  gap: 20px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 4px;
}

.movie-poster {
  width: 100px;
  height: 140px;
  border-radius: 4px;
  overflow: hidden;
}

.movie-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-info {
  flex: 1;
}

.order-info h4 {
  margin: 0 0 10px;
  font-size: 16px;
  color: #333;
}

.order-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.price {
  color: #ff5f16;
  font-size: 16px;
  font-weight: bold;
  margin-top: 10px;
}

.order-status {
  text-align: right;
  min-width: 100px;
}

.order-status span {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.order-status .completed {
  background: #e8f5e9;
  color: #4caf50;
}

.order-status .pending {
  background: #fff3e0;
  color: #ff9800;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 10px;
}

.info-form {
  max-width: 400px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #666;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.form-group input:disabled {
  background: #f5f5f5;
  cursor: not-allowed;
}

.button-group {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}

.edit-btn, .save-btn, .cancel-btn {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

.edit-btn {
  background: transparent;
  border: 1px solid #ff5f16;
  color: #ff5f16;
}

.save-btn {
  padding: 8px 20px;
  background-color: #ff5f16;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.save-btn:hover {
  background-color: #ff4500;
}

.cancel-btn {
  padding: 8px 20px;
  background-color: #f5f5f5;
  color: #666;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-btn:hover {
  background-color: #e8e8e8;
}

@media (max-width: 768px) {
  .profile-content {
    flex-direction: column;
  }

  .user-info-section {
    width: 100%;
  }
}

.order-section {
  margin-bottom: 20px;
}

.section-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.order-list {
  margin-top: 20px;
}

.order-item {
  display: flex;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  gap: 20px;
}

.movie-poster {
  width: 120px;
  height: 160px;
  border-radius: 4px;
  overflow: hidden;
}

.movie-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-info {
  flex: 1;
}

.order-info h4 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: bold;
}

.order-info p {
  margin: 5px 0;
  color: #666;
  font-size: 14px;
}

.price {
  color: #ff5f16;
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
}

.order-status {
  text-align: right;
  min-width: 100px;
}

.order-status span {
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #999;
}

.view-all {
  color: #666;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.view-all:hover {
  color: #ff5f16;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.email-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.email-tip {
  position: absolute;
  right: -60px;
  color: #f56c6c;  /* 红色 */
  font-size: 12px;
  white-space: nowrap;
}

.vip-card {
  background: linear-gradient(135deg, #1a2a3a, #2d4b6e);
  border-radius: 12px;
  padding: 15px;
  margin: 20px 0;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 2;
}

.vip-card h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.vip-options {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 8px;
  margin: 10px auto;
  width: 100%;
}

.vip-option {
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

/* 为不同等级设置不同的样式 */
.vip-option:nth-child(1) {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), rgba(205, 127, 50, 0.1));
  border-color: #cd7f32;
}

.vip-option:nth-child(2) {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.2), rgba(192, 192, 192, 0.1));
  border-color: #c0c0c0;
}

.vip-option:nth-child(3) {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
  border-color: #ffd700;
}

.vip-option:nth-child(4) {
  background: linear-gradient(135deg, rgba(185, 242, 255, 0.2), rgba(185, 242, 255, 0.1));
  border-color: #b9f2ff;
}

.vip-option:nth-child(5) {
  background: linear-gradient(135deg, rgba(255, 100, 0, 0.2), rgba(255, 100, 0, 0.1));
  border-color: #ff6400;
}

.vip-level {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 选中状态样式 */
.vip-option.selected:not(.lower-level) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.vip-option:nth-child(1).selected:not(.lower-level) {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.3), rgba(205, 127, 50, 0.2));
}

.vip-option:nth-child(2).selected:not(.lower-level) {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.3), rgba(192, 192, 192, 0.2));
}

.vip-option:nth-child(3).selected:not(.lower-level) {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.3), rgba(255, 215, 0, 0.2));
}

.vip-option:nth-child(4).selected:not(.lower-level) {
  background: linear-gradient(135deg, rgba(185, 242, 255, 0.3), rgba(185, 242, 255, 0.2));
}

.vip-option:nth-child(5).selected:not(.lower-level) {
  background: linear-gradient(135deg, rgba(255, 100, 0, 0.3), rgba(255, 100, 0, 0.2));
}

.vip-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 为不同等级设置不同的徽章颜色 */
.vip-option:nth-child(1) .vip-badge {
  background: linear-gradient(135deg, #cd7f32, #dea15b);
}

.vip-option:nth-child(2) .vip-badge {
  background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
}

.vip-option:nth-child(3) .vip-badge {
  background: linear-gradient(135deg, #ffd700, #ffeb3b);
}

.vip-option:nth-child(4) .vip-badge {
  background: linear-gradient(135deg, #b9f2ff, #81d4fa);
}

.vip-option:nth-child(5) .vip-badge {
  background: linear-gradient(135deg, #ff6400, #ff9800);
}

.vip-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  color: #fff;
  font-weight: 600;
}

.currency {
  font-size: 12px;
  opacity: 0.9;
}

.amount {
  font-size: 16px;
}

/* 禁用状态样式 */
.vip-option.lower-level {
  opacity: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.8);
}

.vip-content {
  gap: 4px;
}

.vip-divider {
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, #f6d365, #fda085);
  margin: 8px auto;
  border-radius: 1px;
}

.vip-price {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 2px;
}

.currency {
  font-size: 14px;
  color: #f56c6c;
  font-weight: 600;
}

.vip-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
  color: white;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 12px;
  letter-spacing: 1px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.vip-option:not(.lower-level):hover {
  transform: translateY(-3px);
  border-color: #fda085;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  background: linear-gradient(to bottom, #ffffff, #fff5f5);
}

.vip-option.selected:not(.lower-level) {
  border-color: #fda085;
  background: linear-gradient(to bottom, #fff5f5, #fff0f0);
  box-shadow: 0 4px 12px rgba(253,160,133,0.2);
}

.vip-option.selected:not(.lower-level) .vip-badge {
  background: linear-gradient(135deg, #fda085 0%, #f6d365 100%);
}

.vip-option.lower-level {
  opacity: 0.7;
  background: linear-gradient(to bottom, #f8f9fa, #f2f3f5);
  cursor: not-allowed;
  border-color: #dcdfe6;
}

.vip-option.lower-level .vip-badge {
  background: linear-gradient(135deg, #b4b4b4 0%, #969696 100%);
}

.vip-option.lower-level .vip-price {
  color: #909399;
}

.vip-option.lower-level .vip-divider {
  background: #dcdfe6;
}

/* 响应式布局��化 */
@media screen and (min-width: 768px) {
  .vip-options {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  
  .vip-option {
    padding: 10px;
  }
}

.required {
  color: #f56c6c;  /* 使用红色 */
  margin-left: 4px;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.edit-btn, .complete-btn {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #ff5f16;
  background: transparent;
  color: #ff5f16;
}

.edit-btn:hover, .complete-btn:hover {
  background: rgba(255, 95, 22, 0.1);
}

.recharge-btn {
  width: 100%;
  padding: 8px;
  background: linear-gradient(135deg, #fda085 0%, #f6d365 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(253,160,133,0.3);
  margin: 10px auto 0;
}

.recharge-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(253,160,133,0.4);
  background: linear-gradient(135deg, #ff8f70 0%, #f5c74e 100%);
}

.recharge-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(253,160,133,0.3);
}

.recharge-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
</style>